<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
{% load bundler_tags %}
<html>

  <head>
    <title>{% block title %}&AElig;ncl&auml;ve{% endblock %}</title>
    <meta name="authors" content="Media Enclave Team"/>
    <meta name="copyright" content="&copy; 1999&ndash;2007 by Putz Inc."/>
    <meta name="robots" content="NONE"/>
    {% block styles %}
      {% css "aenclave-styles" "base.css" %}
      {% css "aenclave-styles" "aenclave-sprites.css" %}
    {% endblock styles %}
    {% block scripts %}
      {% javascript "aenclave-scripts" "jquery-1.3.2.js" %}
      {% javascript "aenclave-scripts" "jquery.hotkeys.js" %}
      {% javascript "aenclave-scripts" "jquery.cookie.min.js" %}
      {% javascript "aenclave-scripts" "controls.js" %}
      {% defer %}
        <script type="text/javascript">
          jQuery(document).ready(function(e) {
            controls.initialize({{playlist_info|safe}});
          });
          String.prototype.strip = function() {
            return this.replace(/^\s+/, '').replace(/\s+$/, '');
          };
        </script>
      {% enddefer %}
    {% endblock scripts %}
  </head>

  <body>
    <div id="login">
      {% if user.is_authenticated %}
        <tt>{{user.username}}</tt>
        [<a href="{% url menclave-logout %}?goto={% url aenclave-home %}">logout</a>]
      {% else %}
        [<a href="{% url menclave-login %}?goto={{ request.build_absolute_uri }}">login</a>]
      {% endif %}
    </div>

    {% block body %}{% endblock body %}

    {% block copyright %}
    <div id="copyright">Powered by
      <a href="http://code.google.com/p/media-enclave/">Media-Enclave</a></div>
    <div id="copyright">&copy; 1999&ndash;2009 by
      <a href="http://web.mit.edu/2ndwest/www">Putz Inc.</a></div>
    {% endblock copyright %}

    {% block postcopyright %}{% endblock postcopyright %}

    <div id="controls">
      <div class="control-action aenclave-sprites aenclave-sprites-minimize-png"
          id="controls-minimize"href="#" onclick="controls.minimize()">&nbsp;</div>
      <h4>Now Playing:</h4>
      <ol>
        <li id="current-song">--</li>
      </ol>
      <div id="control-box">
        <div id="progress-bar"><div id="timebar"></div></div>
        <div class="control-action" id="pause" onclick="controls.pause()">
          <div class="aenclave-sprites aenclave-sprites-pause-png">&nbsp;</div>
        </div>
        <div class="control-action" style="display:none" id="play"
            onclick="controls.play()">
          <div class="aenclave-sprites aenclave-sprites-play-png">&nbsp;</div>
        </div>
        <div class="control-action" id="skip" onclick="controls.skip()">
          <div class="aenclave-sprites aenclave-sprites-skip-png">&nbsp;</div>
        </div>
        <div class="control-action" id="shuffle" onclick="controls.shuffle()">
          <div class="aenclave-sprites aenclave-sprites-shuffle-png">&nbsp;</div>
        </div>
      </div>
      <ol id="song-list" start="2">
        <!--<li>title - artist - album - track</li>-->
        <!--<li>title - artist - album - track</li>-->
      </ol>
      <span id="control-trailer">
        <!--... 10 songs total, 1h30m playing time.-->
      </span>
    </div>
    <div class="aenclave-sprites aenclave-sprites-maximize-png"
        style="display:none" id="controls-restore"
        onclick="controls.restore()">&nbsp;</div>
  </body>

  <head>
    {% deferred_content %}
  </head>

</html>
